import { StyleSheet, View, Image, Text, TouchableOpacity } from 'react-native'
import React, { useEffect } from 'react'
import type { HomeListItem } from '@/types/home'
import WaterfallFlow from 'react-native-waterfall-flow'
import ResizeImage from '@/components/ResizeImage'
import HeartAnimated from '@/components/HeartAnimated'
import Header from './components/Header'
import CategoryList from './components/CategoryList'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { useGetDataList } from '@/hook/useGetDataList'
import { API } from '@/api/home'

const Home = () => {
  // 获取首页列表
  const getDataList = useGetDataList<HomeListItem[]>(API.HOMELIST_URL, 'GET')
  // 滚动触底的回调
  const onEndReached = async () => {
    // 再次调用接口
    getDataList.getDataList()
  }
  useEffect(() => {
    // 初始化请求
    getDataList.getDataList()
  }, [])

  const navigation = useNavigation<StackNavigationProp<any>>()

  // 渲染 WaterfallFlow
  const RenderWaterfallFlowItem = ({ item }: { item: HomeListItem }) => {
    const styles = StyleSheet.create({
      itemContainer: {
        marginBottom: 6,
        borderRadius: 10,
        marginLeft: 6,
        backgroundColor: '#fff',
        overflow: 'hidden'
      },
      title: {
        color: '#333',
        fontSize: 16,
        paddingHorizontal: 10,
        paddingVertical: 8
      },
      footerLayout: {
        flexDirection: 'row',
        paddingHorizontal: 10,
        alignItems: 'center',
        marginVertical: 18
      },
      avatar: {
        width: 20,
        height: 20,
        borderRadius: 10,
        resizeMode: 'contain'
      },
      userName: {
        fontSize: 14,
        marginLeft: 5,
        flex: 1
      },

      favoriteCount: {
        color: '#8e8e8e',
        fontSize: 14,
        marginLeft: 5
      }
    })

    // 去往文章详情页面
    const onGotoArticle = () => {
      navigation.navigate('Article', {
        id: item.id
      })
    }
    return (
      <TouchableOpacity onPress={onGotoArticle}>
        <View style={styles.itemContainer}>
          {/* 组件宽196 */}
          <ResizeImage uri={item.image} showWidth={196}></ResizeImage>
          <Text style={styles.title}>{item.title}</Text>
          <View style={styles.footerLayout}>
            <Image source={{ uri: item.avatarUrl }} style={styles.avatar}></Image>
            <Text style={styles.userName} numberOfLines={1}>
              {item.userName}
            </Text>
            <HeartAnimated size={20} selected={item.isFavorite}></HeartAnimated>
            <Text style={styles.favoriteCount}>{item.favoriteCount}</Text>
          </View>
        </View>
      </TouchableOpacity>
    )
  }
  // 渲染底部
  const ListFooterComponent = () => {
    const styles = StyleSheet.create({
      footerTxt: {
        width: '100%',
        backgroundColor: '#fafafa',
        color: '#333',
        textAlign: 'center',
        textAlignVertical: 'center',
        marginVertical: 20
      }
    })
    return (
      <Text style={styles.footerTxt}>{getDataList.finish ? '没有更多了~' : '正在加载...'}</Text>
    )
  }

  return (
    <View style={styles.root}>
      {/* 头部 */}
      <Header></Header>
      {/* 文章 */}
      {/* @ts-ignore */}
      <WaterfallFlow
        contentContainerStyle={styles.contentContainerStyle}
        renderItem={RenderWaterfallFlowItem}
        ListFooterComponent={ListFooterComponent}
        data={getDataList.dataList}
        keyExtractor={item => `${item.id}`}
        numColumns={2}
        onEndReachedThreshold={0.1}
        onEndReached={onEndReached}
        refreshControl={getDataList.refreshControl()}
        ListHeaderComponent={<CategoryList />}
      ></WaterfallFlow>
    </View>
  )
}

export default Home

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: '#fafafa'
  },
  contentContainerStyle: {
    marginRight: 6
  }
})
